<template>
  <basic-dialog :visible="show"
                title="工单报检"
                min-width="400px"
                :isShowInnerLoading = 'loading'>
    <q-form @submit="submit" greedy class="dialog-content">
      <div class="form-inline" style="padding: 20px 20px 0;display: block">
        <q-select
          v-model="orderId"
          :options="orderOptions"
          style="width: 360px"
          dense
          :rules="[ val => val !== null || `请选择加工产品`]"
          options-dense
          emit-value
          map-options
          outlined
          @input="checkinShifts"
          v-if="form.isCombinedWorkOrder"
        >
          <template v-slot:no-option>
            <div class="no-option" />
          </template>
          <template v-slot:before>
            <label class="text-right label-width font-size-16" style="color: #333">
              <span class="text-red">*</span>
              <span>加工产品:</span>
            </label>
          </template>
        </q-select>
        <q-select
          v-model="shiftId"
          :options="shiftOpt"
          style="width: 360px"
          dense
          :rules="[ val => val !== null || `请选择加工班次`]"
          options-dense
          emit-value
          map-options
          outlined
        >
          <template v-slot:no-option>
            <div class="no-option" />
          </template>
          <template v-slot:before>
            <label class="text-right label-width font-size-16" style="color: #333">
              <span class="text-red">*</span>
              <span>加工班次:</span>
            </label>
          </template>
        </q-select>
          <div class="padding-b-20 font-16" style="color: #333">该班待报检数：{{shiftUnreported}}</div>
          <q-input
            style="width: 360px"
            ref="jobCount"
            v-model="form.count"
            maxlength="6"
            mask="######"
            dense
            outlined
            :rules="[
            val => /^\d*$/.test(val) || '只能输入正整数',
            val => Number(val) !== 0 || '只能输入正整数',
            val => judgeCount(val) || '请输入有效报检数量'
          ]"
          >
            <template v-slot:before>
              <label class="text-right" style="font-size: 16px;color: #333">
                <span class="text-red">*</span>
                <span>报检数量:</span>
              </label>
            </template>
          </q-input>
        </div>
      <q-separator />
      <div class="dialog-footer text-center margin-t-10">
        <q-btn outline label="取消" color="primary" @click="$emit('close')" class="q-mr-md"/>
        <q-btn unelevated label="确认" color="primary" type="submit"/>
      </div>
    </q-form>
  </basic-dialog>
</template>

<script>
import _ from 'lodash'
import { checkinShifts, getOrderDetail } from 'src/boot/job/process-order'
export default {
  name: 'work-order-test',
  components: {},

  props: {
    show: {
      type: Boolean,
      default: false,
      required: true
    }
  },
  data () {
    return {
      form: {
        count: null
      },
      loading: false,
      orderOptions: [],
      orderId: null,
      shiftId: null,
      shiftOpt: [] // 报工班制
    }
  },
  computed: {
    toBeReported () {
      return (this.form.finishedCount - (this.form.qualityControlledCount || 0)).toFixed(1)
    },
    // 当班未报检
    shiftUnreported () {
      const shift = this.shiftOpt.find(v => v.value === this.shiftId)
      const shiftUnreported = shift ? shift.unreported : 0
      return shiftUnreported
    }
  },
  watch: {
    shiftId (val) {
      this.form.count = Math.ceil(this.shiftUnreported)
    }
  },
  methods: {
    // 编辑填充表格
    assignment (val) {
      this.loading = true
      this.form = _.cloneDeep(val)
      this.loading = true
      // if (this.form.isCombinedWorkOrder) {
      this.orderId = null
      this.getDetail(this.form.id)
      // } else {
      //   this.orderId = this.form.id
      //   this.checkinShifts()
      // }
      // this.form.count = Math.floor(Number(this.form.finishedCount) - Number(this.form.rejectionCount))
    },
    // 获取工单详细
    getDetail (id) {
      getOrderDetail(id).then(res => {
        this.orderOptions = res.workOrders.filter(i => i.isQualityProcess && i.orderStatus !== this.Enums.BUSINESS_STATUS.CLOSE.value).map(item => {
          return {
            label: `${this.$utils.label(item.materialName)}(${this.$utils.label(item.materialNumber)})`,
            value: item.id
          }
        })
        this.orderId = this.orderOptions.length ? this.orderOptions[0].value : null
        this.orderId === null && (this.loading = false)
        this.orderId !== null && this.checkinShifts()
      }).catch(() => {
        this.loading = false
      })
    },
    // 获取报工班制
    checkinShifts () {
      checkinShifts(this.orderId).then(res => {
        if (res.data.length) {
          this.shiftOpt = res.data.map(item => {
            const unreported = (item.checkinCount - item.qcCount).toFixed(1)
            return {
              label: item.name,
              value: item.id,
              unreported: unreported <= 0 ? 0 : unreported// 未报检
            }
          })
          this.shiftId = res.data[0].id
          this.form.count = Math.ceil(res.data[0].checkinCount - res.data[0].qcCount) // 未报检
        } else {
          this.shiftOpt = []
          this.shiftId = null
          this.form.count = null
        }
      }).finally(() => {
        this.loading = false
      })
    },

    // 校验数量
    judgeCount (val) {
      // 报检数量 <= 当班待报检数(向上取整)
      return val <= Math.ceil(this.shiftUnreported)
      // let ret = false
      // const inspectionNumber = Number(this.form.finishedCount) - Number(this.form.rejectionCount)
      // const count = Number(val)
      // if (count >= Math.floor(inspectionNumber) && count <= Math.ceil(inspectionNumber)) {
      //   ret = true
      // } else {
      //   ret = false
      // }
    },
    hideLoading () {
      this.loading = false
    },
    // 提交表单
    submit () {
      this.loading = true
      const query = {
        shiftId: this.shiftId,
        count: this.form.count,
        workOrderId: this.orderId
      }
      this.$emit('submit', query)
    }
  }
}
</script>

<style scoped lang="stylus">
  /deep/ .q-select__dropdown-icon {
    width 24px
    height 24px
    font-size 24px
    color rgba(0, 0, 0, .54)
  }
  .col-3{
    padding 0 10px
    margin-bottom 10px
  }
</style>
